<template>
    <div class="x3">
        <el-container style="height: 100%; margin: 0;padding: 0;">
            <el-header class="tou1">
                <div style="display: flex;">
                    <i :class="this.$router.options.routes[3].children[6].meta.icon" style="align-self: center;"></i>
                    <p>{{ this.$router.options.routes[3].children[6].meta.name }}</p>
                </div>
            </el-header>
            <el-main class="shen1">
                <div style="display: flex;">
                    <div>
                        <template>
                            <el-button type="button" style="width: 100px ;height: 35px;" @click="add">点击打开 </el-button>
                        </template>
                    </div>
                    <div style="display: flex; justify-content: flex-end;margin-left:20px">
                        <el-input v-model="params.name" placeholder="请输入内容"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="sous">搜索</el-button>
                    </div>
                </div>
                <div>
                    <template>
                        <el-table :data="guanli" style="width: 100% ,">
                            <el-table-column prop="departmentName" label="系名" width="180">
                            </el-table-column>
                            <el-table-column prop="majorName" label="专业名" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="课程名">
                            </el-table-column>


                            <el-table-column prop="" label="操作">
                                <template slot-scope="scope">
                                    <el-button  type="danger" size="small"@click='shan(scope.row.id)'>删除</el-button>
                                    <el-button type="success" size="small" @click='edit(scope.row.id)'>编辑</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </template>
                </div>
            </el-main>
            <el-footer class="jiao1">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination :current-page.sync="page" @current-change="currentChange" layout="prev, pager, next"
                        :total="yeshu">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>

        <el-dialog title="专业添加" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="100px" ref="form">
                <el-form-item label="学分" prop="credit" :rules="[{ required: true, message: '请输入年份', trigger: 'blur' }]">
                    <el-input v-model="form.credit" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="考试日期" prop="examDate">

                    <el-date-picker v-model="form.examDate" type="date" placeholder="选择入学日期"
                        :rules="[{ required: true, message: '请选择入学日期', trigger: 'change' }]">

                    </el-date-picker>

                </el-form-item>



                <el-form-item label="考试地点" prop="examLocation"
                    :rules="[{ required: true, message: '请输入班级', trigger: 'blur' }]">
                    <el-input v-model="form.examLocation" autocomplete="off"></el-input>
                </el-form-item>





                <el-form-item label="年份" prop="grade" :rules="[{ required: true, message: '请输入年份', trigger: 'blur' }]">
                    <el-input v-model="form.grade" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="上课地点" prop="location"
                    :rules="[{ required: true, message: '请输入专业', trigger: 'blur' }]">
                    <el-input v-model="form.location" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="最多人数" prop="maxSize"
                    :rules="[{ required: true, message: '请输入班级', trigger: 'blur' }]">
                    <el-input v-model="form.maxSize" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程名字" prop="name" :rules="[{ required: true, message: '请输入年份', trigger: 'blur' }]">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上课老师" prop="teacherId"
                    :rules="[{ required: true, message: '请选择老师', trigger: 'blur' }]">
                    <el-select v-model="form.teacherId" placeholder="请选择老师">
                        <el-option v-for="item in jiaoshishuju" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课时间">
                    <el-select v-model="form.xingqi" placeholder="请问选择日期">
                        <el-option v-for="item in 7" :key="item" :label="'第' + item + '节'" value="item"></el-option>
                    </el-select>
                    <el-select v-model="form.jie" placeholder="请问选择第几节">
                        <el-option v-for="item in 8" :key="item" :label="'第' + item + '节'" value="item"></el-option>
                    </el-select>
                    <el-form-item :rules="[{ required: true, message: '请输时间', trigger: 'blur' }]">
                        <el-input v-model="form.shijian" type='number' autocomplete="off"></el-input>
                    </el-form-item>
                </el-form-item>










            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="kctjtou">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>
import { kcgl, kcgl3, kctj01, jiaoshiid, kctjxq ,kctjxg,shan7} from '@/api/index'
export default {
    data() {
        return {
            input: '',
            guanli: [

            ],
            params: {
                departmentName: '',
                majorName: '',
                name: ''
            },
            yeshu: 1,
            page: 1,
            form: {
                credit: 1,
                examDate: 1,
                examLocation: '',
                grade: 1,
                id: -1,
                location: '',
                maxSize: 1,
                name: '',
                teacherId: '',
                time: '',
                xingqi: '2',
                shijian: '2',
                jie: '2'

            },
            jiaoshishuju: [],
            dialogFormVisible: false

        }

    },

    methods: {
        shan(id) {

shan7(id).then(res => {

    if (res.code === 0) {

        // 假设返回 code 为 0 表示删除成功

        this.$message({

            message: "删除成功",

            type: "success"

        });

        // 刷新数据列表

        this.jiaoshiid();

    } else {

        // 处理删除失败的情况

        console.error("删除失败", res);

    }

}).catch(error => {

    console.error("请求失败", error);

});

},
        edit(id) {
            console.log(id);
            kctjxq(id).then(res => {
                console.log(res);
                if (res.code === 0) {
                    this.form = res.data;
                    this.dialogFormVisible = true;
                    const arr = this.form.time.split("-")
                    this.$set(this.form,"xingqi",arr[0]);
          this.$set( this.form,"jie", arr[1]);
          this.$set(this.form,"shijian", arr[2])
                }

            })
        },
        jiaoshiid() {
            jiaoshiid().then(res => {
                console.log(res.data);
                this.jiaoshishuju = res.data
            })


        },
        add() {
            
            this.dialogFormVisible = true
        },
        kctjtou() {
            this.form["time"] = [this.form.week, this.form.section, this.form.duration].join("-")
            console.log(this.form);
            courseAdd(this.form).then(res => {
                console.log(res);

            })
            if (this.form.id === -1) {
                this.$refs['form'].validate(f => {


                    if (f) { // 确保验证通过

                        kctj01(this.form).then(res => {

                            console.log(res);

                            if (res.code === 0) {

                                this.$message({

                                    message: "添加成功",

                                    type: "success"

                                });

                                this.kcgl1();

                                this.dialogFormVisible = false;

                            }

                        })

                    }

                });
            } else {
                this.$refs['form'].validate(f => {


                    if (f) { // 确保验证通过

                        kctjxg(this.form).then(res => {

                            console.log(res);

                            if (res.code === 0) {

                                this.$message({

                                    message: "添加成功",

                                    type: "success"

                                });

                                this.kcgl1();

                                this.dialogFormVisible = false;

                            }

                        })

                    }

                });
            }


        },
        kcgl1() {
            kcgl(this.params, 1).then(res => {
                console.log(res);
                if (res.code === 0) {
                    console.log(111);

                    this.guanli = res.data
                }
            })
        }, kcgl2(page = 1) {
            kcgl3(this.params, 1).then(res => {
                console.log(res);
                if (res.code === 0) {
                    console.log(111);

                    this.yeshu = res.data * 10;
                    console.log(res.data * 10);
                    // 初始化时加载第一页数据
                    this.kcgl1(1);
                }
            })
        },

        currentChange(v) {
            console.log(v);
            this.page = v;
            this.kcgl1(v); // 传递当前页码
        },
        sous() {
            this.page = 1,
                this.kcgl2(),
                this.kcgl1()
        },
    },
    mounted() {
        this.sous(), this.currentChange(), this.kcgl2(),this.jiaoshiid()
    }
}
</script>
<style lang="scss">
html,
body,
.x3 {

    height: 100%;

    margin: 0;

    padding: 0;

}

.el-header,
.el-main,
.el-footer {
    width: 100%;
    margin: 0;

    padding: 0; // 如果你想完全移除内边距，可以这样设置

    // 如果只是想要调整内边距，可以指定具体的值，例如：

    // padding: 10px;

}

.block {
    justify-items: center;
}
</style>